import { useEffect, useState } from 'react';
import { 
  Settings as SettingsIcon, 
  Monitor, 
  Folder, 
  Users, 
  Shield, 
  Bell, 
  Database, 
  Palette,
  Save,
  RotateCcw
} from 'lucide-react';
import { useAppDispatch } from '@/store';
import { setBreadcrumbs } from '@/store/slices/uiSlice';
import './styles.less';

const Settings: React.FC = () => {
  const dispatch = useAppDispatch();
  const [activeTab, setActiveTab] = useState('general');
  const [settings, setSettings] = useState({
    general: {
      language: 'zh-CN',
      theme: 'light',
      autoStart: false,
      minimizeToTray: true,
    },
    video: {
      defaultFormat: 'mp4',
      defaultQuality: 'medium',
      outputPath: '',
      autoOpenFolder: true,
    },
    performance: {
      maxConcurrency: 3,
      enableHardwareAcceleration: true,
      cacheSize: 1024,
      cleanupAfterDays: 7,
    },
    notifications: {
      enableSound: true,
      showDesktopNotifications: true,
      taskComplete: true,
      taskError: true,
    }
  });

  useEffect(() => {
    dispatch(setBreadcrumbs([{ label: '仪表板', path: '/dashboard' }, { label: '设置' }]));
  }, [dispatch]);

  const handleSettingChange = (category: string, key: string, value: any) => {
    setSettings(prev => ({
      ...prev,
      [category]: {
        ...prev[category as keyof typeof prev],
        [key]: value
      }
    }));
  };

  const handleSaveSettings = () => {
    console.log('保存设置:', settings);
  };

  const handleResetSettings = () => {
    console.log('重置设置');
  };

  const tabs = [
    { id: 'general', label: '通用设置', icon: Monitor },
    { id: 'video', label: '视频处理', icon: Folder },
    { id: 'performance', label: '性能设置', icon: Database },
    { id: 'notifications', label: '通知设置', icon: Bell },
    { id: 'appearance', label: '外观设置', icon: Palette },
    { id: 'security', label: '安全设置', icon: Shield },
  ];

  return (
    <div className='settings-page'>
      {/* 页面标题和描述 */}
      <div className='settings-page__header'>
        <h1 className='settings-page__title'>系统设置</h1>
        <p className='settings-page__description'>
          管理应用程序的各项配置选项
        </p>
      </div>

      {/* 设置布局 */}
      <div className='settings-page__layout'>
        {/* 侧边栏导航 */}
        <div className='settings-page__sidebar'>
          <div className='settings-page__nav'>
            <div className='settings-page__nav-list'>
              {tabs.map(({ id, label, icon: Icon }) => (
                <button
                  key={id}
                  onClick={() => setActiveTab(id)}
                  className={`settings-page__nav-item ${
                    activeTab === id ? 'settings-page__nav-item--active' : ''
                  }`}
                >
                  <div className='settings-page__nav-item-info'>
                    <Icon className='settings-page__nav-item-icon' />
                    <span className='settings-page__nav-item-text'>{label}</span>
                  </div>
                  {activeTab === id && (
                    <div className='settings-page__nav-item-indicator' />
                  )}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* 主内容区域 */}
        <div className='settings-page__main'>
          <div className='settings-page__content'>
            {/* 通用设置 */}
            {activeTab === 'general' && (
              <div className='settings-page__section'>
                <div className='settings-page__section-header'>
                  <h2 className='settings-page__section-title'>通用设置</h2>
                  <p className='settings-page__section-description'>
                    配置应用程序的基本行为
                  </p>
                </div>
                <div className='settings-page__section-content'>
                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>语言设置</label>
                    <select
                      value={settings.general.language}
                      onChange={e => handleSettingChange('general', 'language', e.target.value)}
                      className='settings-page__setting-select'
                    >
                      <option value='zh-CN'>简体中文</option>
                      <option value='en-US'>English</option>
                      <option value='ja-JP'>日本語</option>
                    </select>
                  </div>

                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>主题设置</label>
                    <select
                      value={settings.general.theme}
                      onChange={e => handleSettingChange('general', 'theme', e.target.value)}
                      className='settings-page__setting-select'
                    >
                      <option value='light'>浅色主题</option>
                      <option value='dark'>深色主题</option>
                      <option value='auto'>跟随系统</option>
                    </select>
                  </div>

                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>启动选项</label>
                    <div className='settings-page__setting-controls'>
                      <div className='settings-page__setting-item'>
                        <div className='settings-page__setting-info'>
                          <div className='settings-page__setting-name'>开机自启动</div>
                          <div className='settings-page__setting-description'>
                            系统启动时自动运行应用程序
                          </div>
                        </div>
                        <div className='settings-page__setting-action'>
                          <label className='settings-page__setting-checkbox'>
                            <input
                              type='checkbox'
                              checked={settings.general.autoStart}
                              onChange={e => handleSettingChange('general', 'autoStart', e.target.checked)}
                            />
                            <span>{settings.general.autoStart ? '已启用' : '已禁用'}</span>
                          </label>
                        </div>
                      </div>

                      <div className='settings-page__setting-item'>
                        <div className='settings-page__setting-info'>
                          <div className='settings-page__setting-name'>最小化到系统托盘</div>
                          <div className='settings-page__setting-description'>
                            关闭窗口时最小化到系统托盘而不是退出程序
                          </div>
                        </div>
                        <div className='settings-page__setting-action'>
                          <label className='settings-page__setting-checkbox'>
                            <input
                              type='checkbox'
                              checked={settings.general.minimizeToTray}
                              onChange={e => handleSettingChange('general', 'minimizeToTray', e.target.checked)}
                            />
                            <span>{settings.general.minimizeToTray ? '已启用' : '已禁用'}</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* 视频处理设置 */}
            {activeTab === 'video' && (
              <div className='settings-page__section'>
                <div className='settings-page__section-header'>
                  <h2 className='settings-page__section-title'>视频处理设置</h2>
                  <p className='settings-page__section-description'>
                    配置视频处理的默认参数
                  </p>
                </div>
                <div className='settings-page__section-content'>
                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>默认输出格式</label>
                    <select
                      value={settings.video.defaultFormat}
                      onChange={e => handleSettingChange('video', 'defaultFormat', e.target.value)}
                      className='settings-page__setting-select'
                    >
                      <option value='mp4'>MP4</option>
                      <option value='avi'>AVI</option>
                      <option value='mov'>MOV</option>
                      <option value='mkv'>MKV</option>
                    </select>
                  </div>

                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>默认质量预设</label>
                    <select
                      value={settings.video.defaultQuality}
                      onChange={e => handleSettingChange('video', 'defaultQuality', e.target.value)}
                      className='settings-page__setting-select'
                    >
                      <option value='low'>低质量</option>
                      <option value='medium'>标准质量</option>
                      <option value='high'>高质量</option>
                      <option value='lossless'>无损质量</option>
                    </select>
                  </div>

                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>输出文件夹</label>
                    <input
                      type='text'
                      value={settings.video.outputPath}
                      onChange={e => handleSettingChange('video', 'outputPath', e.target.value)}
                      placeholder='选择输出文件夹...'
                      className='settings-page__setting-input'
                    />
                  </div>

                  <div className='settings-page__setting-group'>
                    <label className='settings-page__setting-label'>处理选项</label>
                    <div className='settings-page__setting-controls'>
                      <div className='settings-page__setting-item'>
                        <div className='settings-page__setting-info'>
                          <div className='settings-page__setting-name'>处理完成后自动打开文件夹</div>
                          <div className='settings-page__setting-description'>
                            任务完成后自动打开输出文件夹
                          </div>
                        </div>
                        <div className='settings-page__setting-action'>
                          <label className='settings-page__setting-checkbox'>
                            <input
                              type='checkbox'
                              checked={settings.video.autoOpenFolder}
                              onChange={e => handleSettingChange('video', 'autoOpenFolder', e.target.checked)}
                            />
                            <span>{settings.video.autoOpenFolder ? '已启用' : '已禁用'}</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* 操作按钮 */}
            <div className='settings-page__section'>
              <div className='settings-page__action-buttons'>
                <button 
                  onClick={handleSaveSettings}
                  className='settings-page__action-button settings-page__action-button--primary'
                >
                  <Save className='w-4 h-4 mr-2' />
                  保存设置
                </button>
                <button 
                  onClick={handleResetSettings}
                  className='settings-page__action-button settings-page__action-button--secondary'
                >
                  <RotateCcw className='w-4 h-4 mr-2' />
                  重置设置
                </button>
              </div>
            </div>

            {/* 欢迎卡片 - 显示开发状态 */}
            <div className='settings-page__welcome-card'>
              <SettingsIcon className='settings-page__welcome-icon' />
              <h2 className='settings-page__welcome-title'>设置功能开发中</h2>
              <p className='settings-page__welcome-text'>
                我们正在开发完整的系统设置功能，包括更多高级选项和自定义配置
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;
